<template>
  <div class="my-member-container">
    <Header
      title="购买会员"
      :clickLeft="goBack"
    />
    <div class="list">
      <RadioGroup v-model="memberType">
        <CellGroup>
          <Cell clickable @click="memberType = 'M'">
            <template slot="title">
              <p class="price-text">包月 <span>￥{{memberPrice.M2}}<b v-show="memberPrice.M1 !== memberPrice.M2">￥{{memberPrice.M1}}</b></span></p>
            </template>
            <Radio checked-color="#14a161" name="M" />
          </Cell>
          <Cell clickable @click="memberType = 'S'">
            <template slot="title">
              <p class="price-text">包季 <span>￥{{memberPrice.S2}}<b v-show="memberPrice.S1 !== memberPrice.S2">￥{{memberPrice.S1}}</b></span></p>
            </template>
            <Radio checked-color="#14a161" name="S" />
          </Cell>
          <Cell clickable @click="memberType = 'Y'">
            <template slot="title">
              <p class="price-text">包年 <span>￥{{memberPrice.Y2}}<b v-show="memberPrice.Y1 !== memberPrice.Y2">￥{{memberPrice.Y1}}</b></span></p>
            </template>
            <Radio checked-color="#14a161" name="Y" />
          </Cell>
        </CellGroup>
      </RadioGroup>
    </div>
    <p class="recom-user" v-show="memberPrice.RecomUser">推荐人：{{memberPrice.RecomUser}}</p>
    <Button type="primary" @click="buyMember" :loading="loading" class="confirm">购买会员</Button>
    <p class="buy-tip">会员一经购买/续费恕不退款</p>
  </div>
</template>
<script>
import Header from '@/components/Header'
import { RadioGroup, Radio, CellGroup, Cell, Field, Button, Toast } from 'vant';
export default {
  components: {
    Header,
    RadioGroup,
    Radio,
    CellGroup,
    Cell,
    Field,
    Button
  },
  data() {
    return {
      title: '开通会员',
      memberType: 'M',
      recomCode: '',
      isGetRecomPrice: false,
      memberPrice: {},
      loading: false
    }
  },
  methods: {
    goBack() {
      this.$route.meta.notKeepAlive = true;
      this.$router.replace('/my');
    },
    buyMember() {
      const { memberType, recomCode } = this;
      this.loading = true;
      this.$http.my.member({
        memberType,
        recomCode
      }).then(({ result }) => {
        this.loading = false;
        this.createWxPay(result.no, result.type)
      }).catch((err) => {
        this.loading = false;
        Toast(err.msg);
      })
    },
    createWxPay(sourceNo, sourceType) {
      this.$http.pay
        .create({
          sourceNo,
          sourceType
        })
        .then(({ result }) => {
          this.memberLoading = false;
          this.$http.pay.wxPay(result).then((res) => {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              Toast.success("支付成功！");
              this.$route.meta.notKeepAlive = true;
              this.$router.go(-1);
            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
              //支付过程中用户取消
              Toast.fail("您取消了支付！");
            } else if (res.err_msg == "get_brand_wcpay_request:fail") {
              //支付失败
              Toast.fail(res.err_desc);
            }
          })
        }).catch(() => {
          this.memberLoading = false;
        })
    },
    getMemberPrice() {
      const recomCode = this.recomCode.length === 6 ? this.recomCode : '';
      this.$showLoading();
      this.$http.my.recomMember({
        recomCode
      }).then(({ result }) => {
        this.memberPrice = result;
        this.$hideLoading();
      }).catch(() => {
        this.$hideLoading();
      })
    }
  },
  created() {
    // this.title = this.$route.query.isMember === 'true' ? '续费会员' : '开通会员';
    this.recomCode = this.$route.params.code;
    this.getMemberPrice();
  },
}
</script>
<style lang="less" scoped>
.price-text{
  span{
    color: red;
    font-size: 32px;
    b{
      margin-left: 10px;
      font-size: 26px;
      color: #7f7f7f;
      text-decoration: line-through;
    }
  }
}
.confirm{
  background-color: @maincolor;
  width: 680px;
  display: block;
  margin: 40px auto 20px;
}
.buy-tip{
  text-align: center;
  font-size: 20px;
  color: #6f3f15;
}
.recom-user{
  padding: 10PX 15PX;
}
</style>
